<template>
  <div class="grossDetails">
    <div class="container pt-4">
      <div class="row">
        <div class="col-12">
          <div class="pointsRule">
            <ul id="list">
              <li style="z-index:6;background-image: linear-gradient(to right, #005bea ,#00c6fb)" class="green" @click="gotoHome()"><a><span>首页</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:5;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="gotoNav()"><a><em class="before"></em><span>预算管理</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:4;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="$router.push('/nav3')"><a><em class="before"></em><span>预算编制</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:3;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="$router.push('/nav4')"><a><em class="before"></em><span>制定目标</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:2;background-image: linear-gradient(to right, #005bea ,#00c6fb)"  @click="$router.push('/nav6')"><a><em class="before"></em><span>收入</span><i style="background-color:#00c6fb"></i></a></li>
              <li style="z-index:1;background-color: #ffc107;"><a><em class="before"></em><span style="color: #4e555b;">{{typeName}}</span><i style="background-color:#ffc107;"></i></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!--表格-->
    <div class="container content mt-4">
      <div class="row">
        <div class="col-12  font-weight-bold text-secondary mb-3 mt-2 text-center">
          {{typeName}}类-业务预算编制（单位：元）
        </div>
      </div>
      <div class="row">
        <div class="col-12 pl-0 pr-0 grossDetailsTable" style="height:400px; overflow: scroll; ">
          <table class="table table-hover table-bordered table-striped" style="table-layout:fixed;">
            <thead class="">
              <tr>
                <th>项目</th>
                <th>2020年</th>
                <th>2021年</th>
                <th>调整值</th>
                <th>1月</th>
                <th>2月</th>
                <th>3月</th>
                <th>4月</th>
                <th>5月</th>
                <th>6月</th>
                <th>7月</th>
                <th>8月</th>
                <th>9月</th>
                <th>10月</th>
                <th>11月</th>
                <th>12月</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>合计</td>
                <td>{{year2020Amount}}</td>
                <td><input type="text" v-model="goalAmount"/></td>
                <td>{{parseFloat(year2020Amount) - parseFloat(goalAmount)}}</td>
                <td><input type="text" /></td>
                <td><input type="text" /></td>
                <td><input type="text" /></td>
                <td><input type="text" /></td>
                <td><input type="text" /></td>
                <td><input type="text" /></td>
                <td><input type="text" /></td>
                <td><input type="text" /></td>
                <td><input type="text" /></td>
                <td><input type="text" /></td>
                <td><input type="text" /></td>
                <td><input type="text" /></td>
              </tr>
              <tr v-for="item in detailList">
                <td>{{item.content}}</td>
                <td>{{item.year2020}}</td>
                <td><input type="text" v-model="item.amount_goal"/></td>
                <td>{{parseFloat(item.year2020) - parseFloat(item.amount_goal)}}</td>
                <td><input type="text"  v-model="item.month1"/></td>
                <td><input type="text"  v-model="item.month2"/></td>
                <td><input type="text"  v-model="item.month3"/></td>
                <td><input type="text"  v-model="item.month4"/></td>
                <td><input type="text"  v-model="item.month5"/></td>
                <td><input type="text"  v-model="item.month6"/></td>
                <td><input type="text"  v-model="item.month7"/></td>
                <td><input type="text"  v-model="item.month8"/></td>
                <td><input type="text"  v-model="item.month9"/></td>
                <td><input type="text"  v-model="item.month10"/></td>
                <td><input type="text"  v-model="item.month11"/></td>
                <td><input type="text"  v-model="item.month12"/></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="row mt-3">
        <div class="col-12 text-right">
          <button class="btn btn-success" @click="save">提交</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'grossProfitList',
    data () {
      return {
        typeName: '',
        type: '',
        goalAmount: 0,
        year2020Amount: 0,
        predictAmount: 0,
        detailList: []
      }
    },
    created() {
      this.typeName = this.$route.params.type
      this.type = this.typeName === '政府' ? '11' : '12'
      this.getCostDetail()
    },
    methods: {
      gotoHome(){
        this.$router.push("/index");
      },
      //跳转到书吧
      gotoNav: function(){
        this.$router.push("/nav2");
      },
      gotoNav3: function(){
        this.$router.push("/nav3");
      },
      getCostDetail () {
        this.loading = this.$loading({
          lock: true,//lock的修改符--默认是false
          text: 'Loading',//显示在加载图标下方的加载文案
          spinner: 'el-icon-loading',//自定义加载图标类名
          background: 'rgba(0, 0, 0, 0.7)',//遮罩层颜色
          target: document.querySelector('#table')//loadin覆盖的dom元素节点
        });
        this.$http.get(
          '/api/getTargetList',
          {
            params: {
              type: this.type
            }
          }).then(res => {
          this.detailList = res.data
          this.detailList.forEach(val => {
            this.year2020Amount += parseFloat(val.year2020)
            this.goalAmount += parseFloat(val.amount_goal)
          })
          this.loading.close()
        })
      },
      save() {
        let data = JSON.stringify(this.detailList)
        console.log(this.detailList)
        this.$http.post(
          '/api/save',
          data, {
            headers: {
              'Content-Type': 'application/json'
            }
          }).then(res => {
          this.$message({
            type: "success",
            message: '保存成功'
          })
        })
      },
    }
  }
</script>

<style scoped>
  .grossDetails {
    height: 200%;
  }
  tr{
    text-align: center;
  }
  table tr td,
  table tr th{
    vertical-align: middle;
    width: 80px;

  }
  table input {
    width: 100%;
    border: none;
    background: transparent;
    text-align: center;
  }
  table input:focus {
    outline: none;
  }



  /*修改滚动条样式*/
  .grossDetailsTable::-webkit-scrollbar{
    width:10px;
    height:10px;
    /**/
  }
  .grossDetailsTable::-webkit-scrollbar-track{
    background: rgb(239, 239, 239);
    border-radius:2px;
  }
  .grossDetailsTable::-webkit-scrollbar-thumb{
    background: #bfbfbf;
    border-radius:10px;
  }
  .grossDetailsTable::-webkit-scrollbar-thumb:hover{
    background: #5a6268;
  }
  .grossDetailsTable::-webkit-scrollbar-corner{
    background: #bfbfbf;
  }
</style>
